<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>微博发布效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .weibo {
      width: 600px;
      border: 1px solid #ccc;

      margin: 100px auto;
      padding: 10px;

    }

    .weibo-text {
      width: 590px;
      height: 140px;
      padding: 5px;
      border: 1px solid #ccc;
      outline: none;
      resize: none;
    }

    .weibo-text:focus {
      border-color: #f60;
    }

    .weibo-btn {
      width: 80px;
      height: 30px;
      background-color: #f90;
      color: #fff;
      border: 0 none;
      margin-top: 5px;
      border-radius: 3px;
      cursor: pointer;
      outline: 0 none;
    }

    .weibo-list {
      padding-top: 10px;
    }

    .weibo-list li {
      font-size: 14px;
      line-height: 30px;
      border-bottom: 1px dotted #ccc;
      overflow: hidden;
    }

    .weibo-list li p {
      float: left;
    }

    .weibo-list li span {
      float: right;
      cursor: pointer;
    }

    .weibo-list li input {
      height: 24px;
      line-height: 24px;
      width: 300px;
      font-size: 14px;
      border: 0 none;
    }

    .time {
      margin-right: 10px;
      font-style: normal;
      float: right;
    }
  </style>
</head>

<body>
  <div class="weibo">
    <textarea class="weibo-text"></textarea>
    <input class="weibo-btn" value="发布" type="button">
    <ul class="weibo-list">
      <!-- <li>
            <p class="content">快来收了这九款用上就停不下来的应用吧！！</p>
            <span class="time"></span>
            <span class="del">删除</span>
        </li> -->
    </ul>
  </div>
</body>
<script>
  function patchZero(v) {
    return v < 10 ? '0' + v : v;
  }

  function formatDate() {
    var now = new Date();
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
    var h = now.getHours();
    var mm = now.getMinutes();
    var s = now.getSeconds();
    return y + '-' + patchZero(m) + '-' + patchZero(d) + ' ' + patchZero(h) + ":" + patchZero(mm) + ':' + patchZero(s);
  }
  // 点击发布按钮触发事件，通过value获取表单元素的内容转换成JSON格式的字符串储存数据到window
  // 本地数据库localstorage里面,然后实行发布按钮之后就等于增加Ul里面的li,发布成功后文本框内容就会删除，
  // 发布之后的数据插在li的最前面，点击删除动态的时候等于把li通过委托事件删除，然后再把数据库里面的内容
  // 通过获取对应的id删除，然后把新的数组直接储存到本地上面覆盖之前的内容
  var text=document.querySelector('.weibo-text');
  var btn=document.querySelector('.weibo-btn');
  var list=document.querySelector('.weibo-list');
  // 定义一个数组，用来储存所有的数据
  var wbData=[];
  // 点击按钮注册事件
  btn.onclick=function(){
    var content=text.value;
    var time=formatDate();
    var id=Date.now()+Math.floor(Math.random()*10000);
    wbData.unshift({
      content:content,
      time:time,
      id:id 
    });
    var li=document.createElement('li');
    li.innerHTML='<p class="content">'+content+'</p>'+
             '<span class="del data-id="'+id+'">删除</span>'+
            '<span class="time">'+time+'</span>';
    list.insertBefore(li,list.children[0]);
    var wbshuju=JSON.stringify(wbData);
    localStorage.setItem('shujuming',wbshuju);
    // 把文本域里面的数据清空
    text.value='';
  };
  // 将发布后的内容实现展示再页面
  // 1.先要想之前的发布储存在本地的数据提取出来
  var wbData=localStorage.getItem('shujuming');
  var wbData=JSON.parse(wbData);
  

  // 判断一下wbData是不是有数据，如果没有数据，初始化为一个空数组
  if(wbData==null){
    wbData=[];
  }
  wbData.forEach(function(e){
    var li=document.createElement('li');
    li.innerHTML='<p class="content">'+e.content+'</p>'+
             '<span class="del data-id="'+e.id+'">删除</span>'+
            '<span class="time">'+e.time+'</span>';
            console.log(li)
    list.appendChild(li);
  });
  // 实现组合键发布
  text.onkeydown=function(e){
    if(e.ctrlKey&&e.keyCode===13){
      btn.onclick();
    }
  }
  // 实现删除功能
//  使用事件委托到ul删除
list.addEventListener('click',function(e){
  // 判断点击的是否是span
  if(e.target.nodeName==='SPAN'){
    var span=e.target;
    var li=span.parentNode;
    // 把ul里面的li移除
    list.removeChild(li);
  }
  // 要把li对应的数据删除掉
  // 根据id移除
  // 先得到点击的按钮的id
  var delid=span.dataset.id;
  wbData.forEach(function(a,i){
    if(a.id===delid){
      wbDate.splice(i,1);
    }
  });
  // 把新的数组，直接存储到localstorage里面，覆盖掉原来的内容就把删除的数据删掉了
  var wbData=JSON.stringify(wbData);
  localStorage.setItem('shujuming',wbData);
});





  
</script>

</html>